//     综合查询
import './index.scss'
import { Button, Row, Col, Form, Input, Select, Space, Table, Modal, message } from 'antd';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/lib/table';
import { ReactNode, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { setJson } from '../../../store/comprehensiveInquiry';
import axios from '../../../utils/axios'
const { Option } = Select;
const ComprehensiveInquiry = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [basic] = Form.useForm()
  // 点击搜索按钮获取表单数据
  const getAllInput = (values: any) => {
    // /examine/IntegratedQuery
    axios({
      url: '/examine/IntegratedQuery',
      method: 'get',
      params: values
    }).then(res => {
      if (res.data.data.length > 0) {
        message.success(`搜索成功,有${res.data.data.length}条消息`);
        setSum(res.data.data.length)
        setData(res.data.data)
      }
      else {
        message.warning('没有搜索到信息');
      }
    })
      .catch(error => console.log(error))
  };
  // 重置按钮
  const resetBtn = () => {
    getData()
    basic.resetFields()
  }
  useEffect(() => {
    getData()
  }, [])
  const getData = () => {
    axios({
      url: '/examine/IntegratedQuery',
      method: 'get',
    }).then(res => {
      setSum(res.data.data.length)
      setData(res.data.data)
    })
      .catch(error => console.log(error))
  }
  // 表格
  interface DataType {
    caId: string;//id
    mcState: string;//常规检验
    mcAssay: string;//化验室
    mcSchedule: string//进度节点
    materialsCode: string;//物料编码
    materialsName: string;//物料名称
    materialsStyle: string;//规格型号
    supName: string;//供方简称
    pcId: string;//批次
    mcNum: number;//数量
    mcUseTime: string;// 预计使用时间
    mcTime: string;// 派单时间
    mcPosition: string;//收货库位
    mcUserId: string;// 检验员代号
    materialStyleName: string;// 物料类型
    mcEnding: string// 检验结论
    mcReturnId: string//反馈编号
    // 检验报告
    mcRemark: string//备注
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id1',
      key: 'id1',
      align: 'center',
      className: 'headerBg',
      width: 40,
    },
    {
      title: '操作1',
      key: 'age',
      align: 'center',
      className: 'headerBg',
      width: 100,
      render: (_, record) => <Space>
        <Button type='link' onClick={() => urgent(record.pcId)} size='small'>加急</Button>
        <Button type='link' onClick={() => redact(record)} size='small'>编辑</Button>
        <Button type='link' onClick={() => delBtn(record)} size='small'>删除</Button>
      </Space>
    },
    {
      title: '操作2',
      align: 'center',
      className: 'headerBg',
      width: 100,
      render: (_, record) => <Space direction="vertical" size={[0, 1]}>
        <Button type='link' onClick={() => changeBtn(record.pcId)} size='small' >变更待检</Button>
        <Button type='link' onClick={() => showModal(record)} size='small'>变更检验员</Button>
      </Space>
    },
    {
      title: '常规检验',
      dataIndex: 'mcState',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '化验室',
      dataIndex: 'mcAssay',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '进度节点',
      dataIndex: 'mcSchedule',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '物料编码',
      dataIndex: 'materialsCode',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '物料名称',
      dataIndex: 'materialsName',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '规格型号',
      dataIndex: 'materialsStyle',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '供方简称',
      dataIndex: 'supName',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '批次',
      dataIndex: 'pcId',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '数量',
      dataIndex: 'mcNum',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '预计使用时间',
      dataIndex: 'mcUseTime',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '派单时间',
      dataIndex: 'mcTime',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '收货库位',
      dataIndex: 'mcPosition',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '检验员代号',
      dataIndex: 'mcUserId',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '物料类型',
      dataIndex: 'materialStyleName',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '检验结论',
      dataIndex: 'mcEnding',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '反馈编号',
      dataIndex: 'mcReturnId',
      align: 'center',
      className: 'headerBg',
      width: 100,
    },
    {
      title: '检验报告',
      align: 'center',
      className: 'headerBg',
      width: 100,
      render: (_, record) => <Button type='link' onClick={() => details(record)} size='small'>报告详情</Button>
    },
    {
      title: '备注',
      dataIndex: 'mcRemark',
      align: 'center',
      className: 'headerBg',
      width: 200,
    },
  ];
  // 展示变更检验员model
  const [visible, setVisible] = useState(false);
  const showModal = (json: DataType) => {
    setVisible(true);
    basic1.setFieldsValue({ pcId: json.pcId })
  };
  // 发送更改请求
  const httpBtn = () => {
    setVisible(false);
    console.log(basic1.getFieldsValue())
  }
  // select检验员
  const focus = () => {
    // console.log('1')
    let arr = []
    arr.push(<Option key='1' value={1}>第一个</Option>)
    setSurveyor(arr)
  }
  const hideModal = () => {
    setVisible(false);
  };
  // 展示的select检验员人
  const [surveyor, setSurveyor] = useState<ReactNode[]>([])
  // 展示数据的data
  const [data, setData] = useState<DataType[]>([]);
  // total 总长度
  const [sum, setSum] = useState<number>(0)
  // 展示条数
  const [showPage, setShowPage] = useState<number>(5)
  // 当前页
  const [current, setCurrentPage] = useState<number>(1)
  // basic1的
  const [basic1] = Form.useForm()
  // 页码改变或者pages改变时触发的函数
  const pageChange = (page: number, pageSize: number) => {
    setCurrentPage(page)
    setShowPage(pageSize)
    console.log(page, pageSize)
  }
  // 加急按钮 
  const urgent = (pcId: string) => {
    Modal.info({
      title: '加急',
      content: (
        <div>
          确定加急?
        </div>
      ),
      closable: true,
      okType: 'primary',
      okText: '提交',
      maskClosable: true,
      onOk(close) {
        axios({
          url: '/examine/changeExpedited',
          method: 'get',
          params: {
            pcId
          }
        }).then(res => {
          if (res.data === true) {
            close()
            getData()
            message.success('加急成功');
          } else {
            message.error('加急失败,请查看状态是否已经加急')
          }
        }).catch(() => message.error('加急失败,请查看状态是否已经加急'))
      },
    });
  }
  // 编辑按钮
  const redact = (json:DataType) => {
    dispatch(setJson(json))
    sessionStorage.setItem('json',JSON.stringify(json))
    navigate('/home/fifth/redact')
  }
  // 删除按钮
  const delBtn = (json: DataType) => {
    axios({
      url: "/examine/deleteExpedited",
      method: 'get',
      params: {
        pcId: json.pcId
      }
    }).then(res => {
      if (res.data === true) {
        message.success('删除成功');
        getData()
      }
    }).catch(error => message.error('删除失败,请重试'))
  }
  // 变更待检按钮
  const changeBtn = (pcId: string) => {
    Modal.info({
      title: '变更待检',
      content: (
        <div>
          确定变更待检?
        </div>
      ),
      closable: true,
      okType: 'primary',
      okText: '提交',
      maskClosable: true,
      onOk(close) {
        axios({
          url: '/examine/changeState',
          method: 'get',
          params: {
            pcId
          }
        }).then(res => {
          if (res.data === true) {
            getData()
            message.success('变更成功');
          } else {
            message.error('变更失败!')
          }
          close()
        }).catch(() => message.error('变更失败'))
      },
    });
  }
  // 查看详情
  const details = (json: DataType) => {
    dispatch(setJson(json))
    sessionStorage.setItem('json',JSON.stringify(json))
    navigate('/home/fifth/details')
  }
  return <div className="ComprehensiveInquiry">
    <Form
      name="basic"
      form={basic}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={getAllInput}
      autoComplete="off"
    >
      <Row justify='space-around'>
        <Col span={4}>
          <Form.Item label="物料编码" name="materialsCode">
            <Input />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="物料名称" name="materialsName">
            <Input />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="供方代码" name="username3">
            <Input />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="供方简称" name="supName">
            <Input />
          </Form.Item>
        </Col>
      </Row>

      <Row justify='space-around'>
        <Col span={4}>
          <Form.Item label="公司" name="username5">
            <Select allowClear disabled>
              <Option value="黑马">黑马</Option>
              <Option value="国信安">国信安</Option>
              <Option value="蚂蚁">蚂蚁</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="检验员代号" name="mcUserId">
            <Input />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="检验状态" name="mcEnding">
            <Select allowClear>
              <Option value="0">待检</Option>
              <Option value="1">检验中</Option>
              <Option value="2">合格</Option>
              <Option value="3">让步</Option>
              <Option value="4">退货</Option>
              <Option value="5">评审中</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="进度节点" name="mcSchedule">
            <Select allowClear>
              <Option value="0">待抽样</Option>
              <Option value="1">检验中</Option>
              <Option value="2">IQC主管审核</Option>
              <Option value="3">质量主管审核</Option>
              <Option value="4">已完结</Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>

      <Row justify='space-around'>
        <Col span={4}>
          <Form.Item label="检验类型" name="materialStyleName">
            <Select allowClear>
              <Option value="1">常规检验物料</Option>
              <Option value="2">特殊检验物料</Option>
              <Option value="3">机械检验物料</Option>
              <Option value="4">人工测试物料</Option>
              <Option value="5">全自动检验物料</Option>
              <Option value="6">指标比对物料</Option>
              <Option value="7">质量测试物料</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="收获库位" name="mcPosition">
            <Input />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item className='btn1' wrapperCol={{ offset: 8, span: 16 }}>
            <Button icon={<SearchOutlined />} htmlType="submit">
              搜索
            </Button>
            <Button onClick={resetBtn} icon={<RedoOutlined />}>
              重置
            </Button>
          </Form.Item>
        </Col>
        <Col span={4}></Col>
      </Row>
    </Form>
    <Table pagination={{
      total: sum,
      showQuickJumper: true,//页码是否展示跳转
      defaultPageSize: showPage,
      showSizeChanger: true,
      pageSizeOptions: [5, 10, 15],
      onChange: pageChange,
    }} rowKey={record => record.pcId} size="small" scroll={{ x: 2200 }} columns={columns} dataSource={data} bordered />
    <span className='cl'>共{sum}条记录 第{current}/{Math.ceil(sum / showPage)}页</span>
    <Modal
      title="Modal"
      visible={visible}
      onOk={httpBtn}
      onCancel={hideModal}
      okText="确认"
      cancelText="取消"
    >
      <Form
        name="basic1"
        form={basic1}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item label="现检验员" name="pcId">
          <Input />
        </Form.Item>
        <Form.Item label="新检验员" name="userId">
          <Select allowClear onFocus={focus}>
            {surveyor}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  </div>
}

export default ComprehensiveInquiry

